<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="commons/include::html">
</head>
<body>
<div class="row-fulid" style="text-align: center;margin:0 auto;width: 1000px; ">
    <h1>TEddST</h1>
    <a>magnet:?xt=urn:btih:04526a6d37c23ef7cb1e9b7417ba285ce01d9c99</a>
    <div class="col-md-12">
        <form th:action="@{/api/userController/userlist}" method="post">
            <input name="magent"/>
            <button type="submit">生成javaRepository</button>
        </form>
    </div>
        <table width="100%" border="1" cellspacing="1" cellpadding="0">
            <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>版本</td>
            </tr>
            <tr th:each="user:${userList}">
                <td th:text="${user.id}">ID</td>
                <td th:text="${user.userName}">名字</td>
                <td><a th:href="${user.version}" target="_blank">版本</a></td>
            </tr>
        </table>
    </div>
    <div class="col-md-12">
        <table id="bootstrapTable" class="col-xs-12">

        </table>
    </div>
    <div class="col-md-12">
        <table id="bootstrapTable2" class="col-xs-12">

        </table>
    </div>
</div>
</body>
</html>

<script>
    var s={
        "total":10,
        "rows":[ {
        "id" : "1",
        "userName" : "2",
        "description" : "",
        "description2" : null,
        "abc" : null,
        "descriptionStr" : "",
        "descriptionStr2" : ""
    }, {
        "id" : "2",
        "userName" : "1",
        "description" : "",
        "description2" : null,
        "abc" : null,
        "descriptionStr" : "",
        "descriptionStr2" : ""
    }, {
        "id" : "21",
        "userName" : "string",
        "description" : "",
        "description2" : null,
        "abc" : null,
        "descriptionStr" : "",
        "descriptionStr2" : ""
    }, {
        "id" : "22",
        "userName" : "22",
        "description" : "",
        "description2" : null,
        "abc" : null,
        "descriptionStr" : "",
        "descriptionStr2" : ""
    }, {
        "id" : "23",
        "userName" : "string",
        "description" : "",
        "description2" : null,
        "abc" : null,
        "descriptionStr" : "",
        "descriptionStr2" : ""
    }, {
        "id" : "3",
        "userName" : "4",
        "description" : "",
        "description2" : null,
        "abc" : null,
        "descriptionStr" : "",
        "descriptionStr2" : ""
    }, {
        "id" : "32",
        "userName" : "22",
        "description" : "",
        "description2" : null,
        "abc" : null,
        "descriptionStr" : "",
        "descriptionStr2" : ""
    }, {
        "id" : "33",
        "userName" : "string",
        "description" : "",
        "description2" : null,
        "abc" : null,
        "descriptionStr" : "",
        "descriptionStr2" : ""
    }, {
        "id" : "34",
        "userName" : "string",
        "description" : "",
        "description2" : null,
        "abc" : null,
        "descriptionStr" : "",
        "descriptionStr2" : ""
    }, {
        "id" : "5",
        "userName" : "5",
        "description" : "",
        "description2" : null,
        "abc" : null,
        "descriptionStr" : "",
        "descriptionStr2" : ""
    } ]};

    $(function () {

        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();
        //1.初始化Table2
        var oTable2 = new TableInit2();
        oTable2.Init();
//        var headers={};
//        headers[$('#_csrf_parameter_name').attr("name")]=$('#_csrf_parameter_name').attr("value");
//        headers[$('#_csrf_header_name').attr("name")]=$('#_csrf_header_name').attr("value");
        $.ajax({
            url: root+'/userController/userlistpaged',
            method: 'post',
            //headers:getHeaderCsrf(),
            contentType: 'application/json',
            data:JSON.stringify({size:10,page:0}),
            success:function(data){
                debugger;
                var s=data;
//                $bootstrapTable.bootstrapTable("load",s.rows);
//                $bootstrapTable2.bootstrapTable("load",s);
                var info=eval(data);
            }
        });
//        $.ajax({
//            url: '/api/userController/userlistpaged2',
//            method: 'post',
//            contentType: 'application/json',
//            data:JSON.stringify(getDataCsrf),
//            success:function(data){
//                var s=data;
//                $bootstrapTable2.bootstrapTable("load",s);
//                var info=eval(data);
//            }
//        });
        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

    });
//    $.ajax({
//        url: '/api/userController/userlist',
//        method: 'get',
//        contentType: 'application/json',
//        data:JSON.stringify(getDataCsrf()),
//        success:function(data){
//            debugger;
//            var s=data;
//            var info=eval(data);
//        }
//    });

    var $bootstrapTable = $("#bootstrapTable");
    var $bootstrapTable2 = $("#bootstrapTable2");
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $bootstrapTable.bootstrapTable({
                url: root+'/userController/userlist',         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: false,                   //是否显示分页（*）
                sortable: true,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber:1,                       //初始化加载第一页，默认第一页
                pageSize: 20,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表

                columns: [{
                    checkbox: true
                }, {
                    field: 'id',
                    title: '用户id'
                }, {
                    field: 'userName',
                    title: '用户名'
                }, {
                    field: 'version',
                    title: '数据版本'
                }, {
                    field: 'description',
                    title: '描述'
                }, {
                    field: 'description2',
                    title: '描述'
                }, {
                    field: 'descriptionStr',
                    title: '描述'
                }, {
                    field: 'descriptionStr2',
                    title: '描述'
                }]
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            return {
                limit: params.limit,   //页面大小
                offset: params.offset  //页码
            }
        };
        return oTableInit;
    };

    var TableInit2 = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $bootstrapTable2.bootstrapTable({
                url: root+'/userController/userlistpaged',         //请求后台的URL（*）
                method: 'post',                      //请求方式（*）
//                ajaxOptions:{                        //添加请求头
//                    headers: getHeaderCsrf()
//                },
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParamsType:"",                 //默认limit
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber:1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [{
                    checkbox: true
                }, {
                    field: 'id',
                    title: '用户id'
                }, {
                    field: 'userName',
                    title: '用户名'
                }, {
                    field: 'version',
                    title: '数据版本'
                }, {
                    field: 'description',
                    title: '描述'
                }, {
                    field: 'description2',
                    title: '描述'
                }, {
                    field: 'descriptionStr',
                    title: '描述'
                }, {
                    field: 'descriptionStr2',
                    title: '描述'
                }]
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            debugger;
            return {
                size: params.pageSize,   //页面大小
                page: params.pageNumber-1,  //页码
            };
        };
        return oTableInit;
    };

    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};

        oInit.Init = function () {
            //初始化页面上面的按钮事件
        };

        return oInit;
    };

</script>